<template>
  <div class="early-warning-container">
    <div class="page-header">
      <h1>Early Warning System</h1>
      <p>Monitor early warning indicators and preventive alerts</p>
    </div>
    
    <div class="warning-content">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="warning-card">
            <template #header>
              <div class="card-header">
                <span>Active Warnings</span>
                <el-button type="warning" size="small">Configure</el-button>
              </div>
            </template>
            
            <div class="warning-list">
              <div v-for="warning in activeWarnings" :key="warning.id" class="warning-item">
                <div class="warning-icon">
                  <el-icon :color="warning.color"><Warning /></el-icon>
                </div>
                <div class="warning-info">
                  <h4>{{ warning.title }}</h4>
                  <p>{{ warning.description }}</p>
                  <span class="warning-time">{{ warning.time }}</span>
                </div>
                <div class="warning-actions">
                  <el-button size="small" @click="handleAcknowledge(warning)">
                    Acknowledge
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="12">
          <el-card class="threshold-card">
            <template #header>
              <div class="card-header">
                <span>Warning Thresholds</span>
                <el-button type="primary" size="small">Edit</el-button>
              </div>
            </template>
            
            <div class="threshold-list">
              <div v-for="threshold in thresholds" :key="threshold.id" class="threshold-item">
                <div class="threshold-info">
                  <h4>{{ threshold.parameter }}</h4>
                  <p>{{ threshold.description }}</p>
                </div>
                <div class="threshold-values">
                  <span class="current">Current: {{ threshold.current }}</span>
                  <span class="limit">Limit: {{ threshold.limit }}</span>
                </div>
                <div class="threshold-status">
                  <el-tag :type="threshold.status === 'Normal' ? 'success' : 'warning'">
                    {{ threshold.status }}
                  </el-tag>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Warning } from '@element-plus/icons-vue'

const activeWarnings = ref([
  {
    id: 1,
    title: 'Temperature Rising',
    description: 'Battery temperature approaching upper limit',
    time: '2 minutes ago',
    color: '#e6a23c'
  },
  {
    id: 2,
    title: 'Voltage Fluctuation',
    description: 'Voltage variation exceeds normal range',
    time: '5 minutes ago',
    color: '#f56c6c'
  }
])

const thresholds = ref([
  {
    id: 1,
    parameter: 'Temperature',
    description: 'Battery temperature threshold',
    current: '45°C',
    limit: '50°C',
    status: 'Warning'
  },
  {
    id: 2,
    parameter: 'Voltage',
    description: 'Battery voltage threshold',
    current: '48.5V',
    limit: '52V',
    status: 'Normal'
  },
  {
    id: 3,
    parameter: 'Current',
    description: 'Charge/discharge current threshold',
    current: '2.3A',
    limit: '5A',
    status: 'Normal'
  }
])

const handleAcknowledge = (warning: any) => {
  console.log('Acknowledge warning:', warning)
}
</script>

<style lang="scss" scoped>
.early-warning-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 30px;
    
    h1 {
      font-size: 28px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 8px 0;
    }
    
    p {
      color: #909399;
      margin: 0;
    }
  }
  
  .warning-content {
    .warning-card {
      .warning-list {
        .warning-item {
          display: flex;
          align-items: center;
          padding: 16px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .warning-icon {
            margin-right: 12px;
            
            .el-icon {
              font-size: 20px;
            }
          }
          
          .warning-info {
            flex: 1;
            
            h4 {
              margin: 0 0 4px 0;
              font-size: 14px;
              color: #303133;
            }
            
            p {
              margin: 0 0 4px 0;
              font-size: 12px;
              color: #606266;
            }
            
            .warning-time {
              font-size: 11px;
              color: #909399;
            }
          }
          
          .warning-actions {
            margin-left: 12px;
          }
        }
      }
    }
    
    .threshold-card {
      .threshold-list {
        .threshold-item {
          display: flex;
          align-items: center;
          padding: 16px 0;
          border-bottom: 1px solid #f0f0f0;
          
          &:last-child {
            border-bottom: none;
          }
          
          .threshold-info {
            flex: 1;
            
            h4 {
              margin: 0 0 4px 0;
              font-size: 14px;
              color: #303133;
            }
            
            p {
              margin: 0;
              font-size: 12px;
              color: #606266;
            }
          }
          
          .threshold-values {
            margin: 0 16px;
            text-align: right;
            
            .current {
              display: block;
              font-size: 12px;
              color: #303133;
              font-weight: 500;
            }
            
            .limit {
              display: block;
              font-size: 11px;
              color: #909399;
            }
          }
          
          .threshold-status {
            margin-left: 12px;
          }
        }
      }
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
